import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shop/app/routes/app_pages.dart';
import 'package:shop/tools/httpsClient.dart';
import 'package:shop/tools/screenAdapter.dart';

import '../../../../component/appBar.dart';
import '../controllers/category_controller.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({super.key});

  Widget _leftWidget() {
    return Container(
      width: ScreenAdapter.width(280),
      height: double.infinity,
      child: Obx(
        () => ListView.builder(
          itemCount: controller.leftList.length,
          itemBuilder: (context, index) {
            return SizedBox(
              width: double.infinity,
              height: ScreenAdapter.height(180),
              child: Obx(
                () => InkWell(
                  onTap: () {
                    controller.changeSelectIndex(
                      index,
                      controller.leftList[index].sId,
                    );
                  },
                  child: Stack(
                    children: [
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Container(
                          width: ScreenAdapter.width(10),
                          height: ScreenAdapter.height(50),
                          color: controller.selectIndex == index
                              ? Colors.red
                              : Colors.white,
                        ),
                      ),
                      Center(
                        child: Text(
                          '${controller.leftList[index].title}',
                          style: TextStyle(
                            fontSize: ScreenAdapter.fontSize(36),
                            fontWeight: controller.selectIndex == index
                                ? FontWeight.bold
                                : FontWeight.normal,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  // 右侧widget
  Widget _rightWidget() {
    return Expanded(
      child: Obx(
        () => Container(
          height: double.infinity,
          child: GridView.builder(
            itemCount: controller.rightList.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: ScreenAdapter.width(40),
              mainAxisSpacing: ScreenAdapter.height(20),
              childAspectRatio: 240 / 340,
            ),
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {
                  Get.toNamed(
                    Routes.PRODUCT_LIST,
                    arguments: {'cid': controller.rightList[index].sId},
                  );
                },
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.center,
                      width: double.infinity,
                      child: Image.network(
                        // 'https://miapp.itying.com/public/upload/0AY3Cpw19ZQ2AkYjbA1tQY-Z.png_200x200.png',
                        HttpsClient.photoUrl(controller.rightList[index].pic),
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(
                        0,
                        ScreenAdapter.height(20),
                        0,
                        0,
                      ),
                      child: Text(
                        '${controller.rightList[index].title}',
                        style: TextStyle(fontSize: ScreenAdapter.fontSize(32)),
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(true),
      body: Padding(
        padding: EdgeInsets.fromLTRB(
          ScreenAdapter.width(4),
          0,
          ScreenAdapter.width(10),
          0,
        ),
        child: Row(
          children: [
            // 左侧滑动列表
            _leftWidget(),
            // 右侧商品列表
            _rightWidget(),
          ],
        ),
      ),
    );
  }
}
